import React, { useEffect, useState } from 'react';
import { Table, Image, Button } from 'antd';
import type { ColumnsType, TableProps } from 'antd/es/table';
import { getAllProductType, delProductTypeById } from '../../apis/productType';
import { SettingOutlined } from '@ant-design/icons';
import Search from './Com/Search';
import AddAndUpdate from './Com/AddAndUpdate';


interface DataType {
  update_time: string;
  price: number;
  counts: number;
  name: string;
  photo: string;
  pid: number;
  id: number;
  goods_type_id: number;
  gname: string;
  status: number;
  likes: number;
}

const ProductType: React.FC = () => {

  //表头数据
  const columns: ColumnsType<DataType> = [
    {
      title: 'id',
      width: 60,
      // dataIndex: 'photo',
      key: 'id',
      fixed: 'left',
      render: (text) => text.id
    },
    {
      title: '名称',
      dataIndex: 'title',
      key: 'title',
      width: 60
    },
    {
      title: '状态',
      key: 'status',
      width: 60,
      render: (text) => (
        <span>{text.status == '启用' ? '启用' : '停用'}</span>
      )
    },
    {
      title: '操作',
      // dataIndex: 'col',
      key: 'col',
      width: 60,
      render: (text) => <SettingOutlined style={{ color: '#53a4f6' }} onClick={() => { setUpdateCol(text); setIsShowAddAndUpdate(true) }} />
    }
  ];
  const [isShowAddAndUpdate, setIsShowAddAndUpdate] = useState(false);
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0)
  const [updateCol, setUpdateCol] = useState()

  useEffect(() => {
    getData()
  }, [])
  // 获取所有商品类型数据
  const getData = async () => {
    const res = await getAllProductType()
    setData((res as any).data.rows.children)
    setTotal((res as any).data.rows.children.length)
  }

  //搜索后商品类型数据
  const updateDate = (newData: [], total: number) => {
    setData(newData)
    setTotal(newData.length)
  }

  //关闭Modal
  const closeModal = (closeType?: string): void => {
    setIsShowAddAndUpdate(false)
    if (closeType)
      getData()
  }

  //change分页后商品数据
  const changePage = async (page: any, pageSize: any) => {
    // const res = await getAllProductType({ pageNum: page, pageSize })
    // console.log('pageres', res)
    // setData((res as any).rows.children)
  }

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  //删除商品
  const deleteCol = async () => {
    const goodsId = selectedRowKeys[0]
    await delProductTypeById(goodsId)
    getData()
  }


  return (
    <>
      <Search updateDate={updateDate}></Search>
      <div>
        <Button onClick={() => { setUpdateCol(undefined); setIsShowAddAndUpdate(true) }}>新增</Button>
        <Button onClick={deleteCol}>删除</Button>
      </div>
      <Table rowSelection={rowSelection}
        rowKey={(text) => text.id}
        columns={columns}
        dataSource={data}
        scroll={{ x: 1500 }}
        size='small'
        pagination={{
          defaultCurrent: 1,
          defaultPageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          total,
          showQuickJumper: true,
          onChange: changePage,
          showTitle: false
        }} />
      {/* 新增/修改模态框 */}
      {isShowAddAndUpdate ? <AddAndUpdate closeModal={closeModal} updateCol={updateCol}></AddAndUpdate> : ''}
    </>
  );
}


export default ProductType;